<template>
  <el-dialog
    v-model="visible"
    width="1000px"
    class="stock-dialog"
    :title="`📊 库存明细`"
    :close-on-click-modal="false"
  >
    <!-- 商品基本信息 -->
    <el-card shadow="hover" class="info-card">
      <el-descriptions :column="3" border>
        <el-descriptions-item label="商品名称">
          <strong>{{ product.productName || '—' }}</strong>
        </el-descriptions-item>

        <el-descriptions-item label="当前库存">
          <el-tag type="info" size="large">{{ product.stock ?? 0 }}</el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="规格">
          {{ product.productSpec || '—' }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 分割线 -->
    <el-divider />

    <!-- 库存流水表格 -->
    <el-table
      v-loading="loading"
      :data="records"
      stripe
      border
      style="width: 100%"
      empty-text="暂无库存变动记录"
      size="small"
    >
      <el-table-column label="操作类型" width="120" align="center">
        <template #default="{ row }">
          <el-tag :type="row.operationType === '1' ? 'success' : 'danger'" effect="dark">
            {{ row.operationType === '1' ? '入库' : '出库' }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="数量" width="120" align="center">
        <template #default="{ row }">
          <span class="qty-change" :class="row.operationType === '1' ? 'in' : 'out'">
            {{ row.operationType === '1' ? '+' : '-' }}{{ row.changeQuantity }}
          </span>
        </template>
      </el-table-column>

      <el-table-column prop="remainingStock" label="剩余库存" width="120" align="center">
        <template #default="{ row }">
          <el-tag type="info" size="small">{{ row.remainingStock }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="createBy" label="操作人" min-width="150" align="center" />
      <el-table-column prop="createTime" label="操作时间" min-width="200" align="right" />
    </el-table>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" plain @click="hide">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { listStockRecord } from '@/api/goods';

interface Product {
  productId?: number;
  productName?: string;
  productSpec?: string;
  stock?: number;
}

interface RecordItem {
  operationType: string;
  changeQuantity: number;
  remainingStock: number;
  createBy: string;
  createTime: string;
}

const visible = ref(false);
const loading = ref(false);
const product = ref<Product>({});
const records = ref<RecordItem[]>([]);

const show = async (data: Product) => {
  product.value = data;
  loading.value = true;
  try {
    const res = await listStockRecord({ productId: data.productId });
    if (res.code === 200) {
      records.value = res.rows || [];
      visible.value = true;
    }
  } finally {
    loading.value = false;
  }
};

const hide = () => (visible.value = false);

defineExpose({ show });
</script>

<style scoped>
.stock-dialog :deep(.el-dialog__body) {
  padding-top: 10px;
}

.info-card {
  margin-bottom: 20px;
  border-radius: 10px;
  background: #f9fafb;
}

.qty-change {
  font-weight: bold;
  font-size: 15px;
  transition: color 0.2s;
}
.qty-change.in {
  color: #16a34a; /* 绿色 入库 */
}
.qty-change.out {
  color: #dc2626; /* 红色 出库 */
}

.dialog-footer {
  text-align: center;
  padding-top: 10px;
}
</style>
